<template>
    <view class="bill-container">
        <topBar :back="true">
            <template #center style="width: 100%;">
                <!-- 导航栏 -->
                <view class="nav-bar flex ai-c jc-c">
                    <view class="nav-tabs">
                        <view class="tab-item" :class="{ active: activeTab === 'quiz' }" @click="switchTab('quiz')">
                            <text>积分记录</text>
                        </view>
                    </view>
                </view>
            </template>
        </topBar>

        <!-- 列表头部 -->
        <view class="list-header">
            <text class="header-item">备注</text>
            <text class="header-item">时间</text>
            <text class="header-item" style="text-align: right;">积分</text>
        </view>

        <!-- 答题记录列表 -->
        <view class="transaction-list">
            <view class="transaction-item" v-for="(item, index) in pointsRecords" :key="index">
                <text class="quiz-level">{{ item.memo }}</text>
                <text class="quiz-date">{{ formatTime(item.createtime) }}</text>
                <text class="quiz-score" style="font-weight: 700;text-align: right;">{{ item.score }}</text>
            </view>
        </view>

        <!-- 底部线条 -->
        <view class="bottom-line"></view>
    </view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/index.js'
import api from '@/api'
import { formatTime } from '@/utils/utils'
const userStore = useUserStore()
const pointsRecords = ref([])
onLoad(() => {
    api.getPointsRecords({
        user_id: userStore.userInfo.id
    }).then(res => {
        pointsRecords.value = res.data.data
    })
})

const activeTab = ref('quiz')

const switchTab = (tab) => {
    activeTab.value = tab
}

const getResultClass = (result) => {
    switch (result) {
        case '获胜':
            return 'result-success'
        case '失败':
            return 'result-fail'
        case '放弃':
            return 'result-abandon'
        default:
            return ''
    }
}

const getScoreClass = (score) => {
    if (score.startsWith('+')) {
        return 'score-positive'
    }
    return 'score-zero'
}

const handleBack = () => {
    uni.navigateBack()
}
</script>

<style scoped>
.bill-container {
    min-height: 100vh;
    background-color: #f0f0f0;
    position: relative;
}

/* 导航栏 */
.nav-bar {
    width: 100%;
    display: flex;
    margin: 0 auto;
}

.back-btn {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-tabs {
    display: flex;
    gap: 64rpx;
}

.tab-item {
    font-size: 36rpx;
    position: relative;
    padding: 16rpx 0;
    cursor: pointer;
}

.tab-item text {
    font-size: 32rpx;
    color: #666666;
    font-weight: 400;
}

.tab-item.active text {
    color: #000000;
    font-weight: 600;
}

.tab-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 38rpx;
    height: 6rpx;
    background: #0F50DC;
    border-radius: 2rpx;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.action-icon {
    font-size: 32rpx;
    color: #000000;
    font-weight: 400;
}

.separator {
    width: 1rpx;
    height: 32rpx;
    background: #e0e0e0;
}

.filter-icon {
    width: 32rpx;
    height: 32rpx;
    border: 2rpx solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-dot {
    width: 6rpx;
    height: 6rpx;
    background: #000000;
    border-radius: 50%;
}

/* 列表头部 */
.list-header {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr;
    align-items: center;
    padding: 40rpx 32rpx 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

.header-item {
    font-size: 28rpx;
    color: #000;
}

/* 答题记录列表 */
.transaction-list {
    padding: 0 32rpx;
}

.transaction-item {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f8f8f8;
}

.quiz-level,
.quiz-date,
.quiz-result,
.quiz-score {
    font-size: 28rpx;
    color: #000000;
    font-weight: 400;
}

.score-positive {
    color: #000;
    font-weight: 600;
}

.score-zero {
    color: #000000;
}

/* 底部线条 */
.bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rpx;
    background: #f0f0f0;
}
</style>
